<template>
  <div class="scrollText">
    <p class="text">
      {{ msg }}
    </p>
  </div>
</template>

<script>
export default {
  props: {
    msg: { type: String, default: "" }
  },
  data() {
    return {
      app: null
    };
  },

  methods: {
    init() {}
  },
  mounted() {
    this.init();
  }
};
</script>

<style lang="scss" scoped>
.scrollText {
  width: 840px;
  height: 360px;
  margin: 0 auto;
  display: block;
  text-align: left;
  overflow: hidden;
  background: lightblue;
  color: red;
  .text {
    display: inline-block;
    animation: mymove 10s infinite linear;
    font-size: 36px;
  }
}
@keyframes mymove {
  from {
    transform: translateX(840px);
  }
  to {
    transform: translateX(-100%);
  }
}
</style>
